// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.landing-nav {
  @top: landing-nav;
  @link-gutter: 12px;
  display: flex;
  justify-content: space-between;
  padding: 30px 20px 20px;
  font-size: @font-size--normal;

  &__section {
    margin: 0 (-@link-gutter);
    display: flex;
  }

  &__link {
    .link-plain();
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0 @link-gutter;
    color: #fff;
    text-transform: lowercase;
    white-space: nowrap;

    &:hover,
    &:focus {
      color: @pink;
    }

    &--bold {
      font-weight: bold;
    }

    &--locale {
      margin: 0;
      color: @purple;
      padding: 5px 0;

      .@{top}__locale-button:hover &,
      .@{top}__locale-button:focus & {
        color: #fff;
      }
    }
  }

  &__locale-button {
    .reset-input();
    padding-right: 10px;
  }

  &__locale-flag {
    margin-right: 5px;
  }

  &__locale-link-pointer {
    .own-layer();
    width: 10px;
    margin-right: 5px;
    text-align: right;
    opacity: 0;
    color: #aaa;
    font-size: 75%;

    .@{top}__locale-button:hover & {
      opacity: 1;
    }
  }

  &__locale-menu {
    .default-border-radius();
    .default-box-shadow();
    z-index: @z-index--nav-float;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    margin-left: -(5px + 10px + 5px - @link-gutter);
    padding: 5px 10px 5px 5px;
    background-color: #333;
    display: flex;
    flex-direction: column;

    &::before {
      content: "";
      width: 100%;
      height: 10px;
      bottom: 100%;
      left: 0;
      opacity: 0;
      position: absolute;
      display: block;
    }
  }

  &__locale-menu-link {
    display: flex;
    position: relative;
  }
}
